<!--
  ~ Copyright (c) 2023 Fime project https://fime.fit
  ~ Initial author: zelde126@126.com
  -->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="fime.css">
    <style>
        /* your css here */
        .key-shift .fime-label:before {
            content: "\e90a";
        }

        .key-shift-fill .fime-label:before {
            content: "\e90b";
        }

        .key-backspace .fime-label:before {
            content: "\e902";
        }

        .key-enter .fime-label:before {
            content: "\e900";
        }

        .key-return .fime-label:before {
            content: "\e909";
        }
    </style>
    <title>Touch</title>
</head>

<body class="fime-box clearfix icon-fime">
    <div class="fime-kbd-box" data-layout="qwerty">
        <div class="fime-key-row">
            <div class="fime-key">
                <span class="fime-symbol">1</span>
                <span class="fime-label">q</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">2</span>
                <span class="fime-label">w</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">3</span>
                <span class="fime-label">e</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">4</span>
                <span class="fime-label">r</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">5</span>
                <span class="fime-label">t</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">6</span>
                <span class="fime-label">y</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">7</span>
                <span class="fime-label">u</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">8</span>
                <span class="fime-label">i</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">9</span>
                <span class="fime-label">o</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">0</span>
                <span class="fime-label">p</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-box">
                &emsp;
            </div>
            <span class="fime-key">
                <span class="fime-symbol">!</span>
                <span class="fime-label">a</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">@</span>
                <span class="fime-label">s</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">#</span>
                <span class="fime-label">d</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">$</span>
                <span class="fime-label">f</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">%</span>
                <span class="fime-label">g</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">^</span>
                <span class="fime-label">h</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">&</span>
                <span class="fime-label">j</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">*</span>
                <span class="fime-label">k</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">\</span>
                <span class="fime-label">l</span>
            </span>
            <div class="fime-box">
                &emsp;
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey key-shift">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">(</span>
                <span class="fime-label">z</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">)</span>
                <span class="fime-label">x</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">[</span>
                <span class="fime-label">c</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">]</span>
                <span class="fime-label">v</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">{</span>
                <span class="fime-label">b</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">}</span>
                <span class="fime-label">n</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">/</span>
                <span class="fime-label">m</span>
            </div>
            <div class="fime-key fime-fnkey key-backspace">
                <span class="fime-label"></span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey">
                <span class="fime-label">En</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">;</span>
                <span class="fime-label">'</span>
            </div>
            <div class="fime-key" style="width: 300%;" data-name="VK_SPACE">
                <span class="fime-label">Fime</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">,</span>
                <span class="fime-label">，</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">.</span>
                <span class="fime-label">。</span>
            </div>
            <div class="fime-key fime-fnkey key-enter">
                <span class="fime-label"></span>
            </div>
        </div>
    </div>

    <div class="fime-kbd-box" data-layout="abc">
        <div class="fime-key-row">
            <div class="fime-key">
                <span class="fime-symbol">1</span>
                <span class="fime-label">q</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">2</span>
                <span class="fime-label">w</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">3</span>
                <span class="fime-label">e</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">4</span>
                <span class="fime-label">r</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">5</span>
                <span class="fime-label">t</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">6</span>
                <span class="fime-label">y</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">7</span>
                <span class="fime-label">u</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">8</span>
                <span class="fime-label">i</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">9</span>
                <span class="fime-label">o</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">0</span>
                <span class="fime-label">p</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-box">
                &emsp;
            </div>
            <span class="fime-key">
                <span class="fime-symbol">!</span>
                <span class="fime-label">a</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">@</span>
                <span class="fime-label">s</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">#</span>
                <span class="fime-label">d</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">$</span>
                <span class="fime-label">f</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">%</span>
                <span class="fime-label">g</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">^</span>
                <span class="fime-label">h</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">&</span>
                <span class="fime-label">j</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">*</span>
                <span class="fime-label">k</span>
            </span>
            <span class="fime-key">
                <span class="fime-symbol">\</span>
                <span class="fime-label">l</span>
            </span>
            <div class="fime-box">
                &emsp;
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey key-shift">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">(</span>
                <span class="fime-label">z</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">)</span>
                <span class="fime-label">x</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">[</span>
                <span class="fime-label">c</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">]</span>
                <span class="fime-label">v</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">{</span>
                <span class="fime-label">b</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">}</span>
                <span class="fime-label">n</span>
            </div>
            <div class="fime-key">
                <span class="fime-symbol">/</span>
                <span class="fime-label">m</span>
            </div>
            <div class="fime-key fime-fnkey key-backspace">
                <span class="fime-label"></span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey">
                <span class="fime-label">123</span>
            </div>
            <div class="fime-key fime-fnkey key-return">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key" style="width: 300%;" data-name="VK_SPACE">
                <span class="fime-label">Space</span>
            </div>
            <div class="fime-key fime-fnkey">
                <span class="fime-label">¥</span>
            </div>
            <div class="fime-key fime-fnkey key-enter">
                <span class="fime-label"></span>
            </div>
        </div>
    </div>

    <div class="fime-kbd-box" data-layout="digital">
        <div class="fime-key-row">
            <div class="fime-key-box fime-key-col" style="width: 12%; height: 144px;">
                <div class="fime-key fime-fnkey" style="border-radius:0; border-bottom: 1px solid #aaadb4;">
                    <span class="fime-label" style="line-height: 30px;">，</span>
                </div>
                <div class="fime-key fime-fnkey" style="border-radius:0; border-bottom: 1px solid #aaadb4;">
                    <span class="fime-label" style="line-height: 30px;">。</span>
                </div>
                <div class="fime-key fime-fnkey" style="border-radius:0; border-bottom: 1px solid #aaadb4;">
                    <span class="fime-label" style="line-height: 30px;">？</span>
                </div>
                <div class="fime-key fime-fnkey" style="border-radius:0; border-bottom: 1px solid #aaadb4;">
                    <span class="fime-label" style="line-height: 30px;">！</span>
                </div>
            </div>
            <div>&nbsp;</div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">1</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">2</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">3</span>
            </div>
            <div class="fime-key fime-fnkey key-backspace" style="width: 8%;">
                <span class="fime-label"></span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key-col" style="width: 12%;">&emsp;</div>
            <div>&nbsp;</div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">4</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">5</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">6</span>
            </div>
            <div class="fime-key fime-fnkey key-enter" style="width: 8%;">
                <span class="fime-label"></span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key-col" style="width: 12%;">&emsp;</div>
            <div>&nbsp;</div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">7</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">8</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">9</span>
            </div>
            <div class="fime-key fime-fnkey" style="width: 8%;">
                <span class="fime-label">¥</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey key-return" style="width: 8%;">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key" style="width: 15%;">
                <span class="fime-label">*</span>
            </div>
            <div class="fime-key" style="width: 20%;">
                <span class="fime-label">0</span>
            </div>
            <div class="fime-key" style="width: 15%;">
                <span class="fime-label">#</span>
            </div>
            <div class="fime-key fime-fnkey" style="width: 8%;">
                <span class="fime-label">En</span>
            </div>
        </div>
    </div>

    <div class="fime-kbd-box" data-layout="symbol">
        <div class="fime-key-row">
            <div class="fime-key">
                <span class="fime-label">+</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">-</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">*</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">/</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">.</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">&</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">|</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">(</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">)</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">=</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key">
                <span class="fime-label">±</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">[</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">]</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">{</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">}</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">&lt;</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">&gt;</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">≈</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">≠</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">#</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key">
                <span class="fime-label">@</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">¥</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">$</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">%</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">÷</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">°</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">©</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">®</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">≤</span>
            </div>
            <div class="fime-key">
                <span class="fime-label">≥</span>
            </div>
        </div>
        <div class="fime-key-row">
            <div class="fime-key fime-fnkey">
                <span class="fime-label">123</span>
            </div>
            <div class="fime-key fime-fnkey key-return">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key fime-fnkey">
                <span class="fime-label">En</span>
            </div>
            <div class="fime-key fime-fnkey key-backspace">
                <span class="fime-label"></span>
            </div>
            <div class="fime-key fime-fnkey key-enter">
                <span class="fime-label"></span>
            </div>
        </div>
    </div>

    <script src="fime.js"></script>
    <script>
        const CN_MODE = 1
        const EN_MODE = 0

        let layouts = {}
        let defaultLayout = 'qwerty'
        fime.qsa('[data-layout]').forEach(el => {
            if (el.dataset.layout != defaultLayout) el.style.display = 'none'
            layouts[el.dataset.layout] = el
        });

        let handle = (keyboard, event, key) => {
            if (event == 'tap') {
                let layout = keyboard.layout
                if (key == 'En' || key == 'abc') {
                    fime.useKeyboard('abc', EN_MODE)
                    return true
                }
                if (key == '123' || key == 'digital') {
                    fime.useKeyboard('digital', EN_MODE)
                    return true
                }
                if (layout != 'symbol' && (key == 'symbol' || key == '¥')) {
                    fime.useKeyboard('symbol', EN_MODE)
                    return true
                }
                if (key == 'VK_FN_RETURN') {
                    fime.useKeyboard(defaultLayout, CN_MODE)
                    return true
                }
            }
            return false
        }

        fime.setupKeyboard(layouts, handle)

        fime.callNative('getDefaultLayout', {}, (args) => {
            defaultLayout = args['default-layout']
            fime.useKeyboard(defaultLayout, CN_MODE, handle)
        })

        fime.addListener('onKeyboardLayout', (json) => fime.useKeyboard(json.layout, json.layout == defaultLayout ? CN_MODE : EN_MODE))
    </script>
</body>

</html>
